<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <title>promise改造回调地狱</title>
    <script src="./1-回调地狱/jquery.js"></script>
</head>



<body>
    <script>
        // 封装ajax请求
        function getData (url, data = {}) {//无对象传入则默认空
            return new Promise((resolve, reject) => {
                $.ajax({
                    // 发送请求类型
                    type: "GET",
                    url: url,
                    data: data,
                    success: function (res) {
                        // 修改Promise状态为成功, 修改Promise的结果res
                        resolve(res)
                    },
                    error: function (res) {
                        // 修改Promise的状态为失败,修改Promise的结果res
                        reject(res)
                    }
                })
            })
        }

        // 调用函数
        getData("./1-回调地狱/data1.json")
            .then((data) => {
                // console.log(data)
                const { id } = data
                return getData("./1-回调地狱/data2.json", { id })
            })
            .then((data) => {
                // console.log(data)
                const { usename } = data
                return getData("./1-回调地狱/data3.json", { usename })
            })
            .then((data) => {
                console.log(data)
            })
    </script>
</body>

</html>